<template>
  <div class="tack">
    <router-link to="/NaviGation/HomePage">首页</router-link> / 系统设置
    <div class="tack_btm">
      <el-card class="box-card">
        <el-form :label-position="labelPosition">
          <el-form-item label="系统组件视觉大小">
            <el-radio-group v-model="radio1">
              <el-radio-button label="正常">正常</el-radio-button>
              <el-radio-button label="小号">小号</el-radio-button>
              <el-radio-button label="超小号">超小号</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="收起导航栏菜单">
            <el-switch v-model="delivery_one"></el-switch>
          </el-form-item>
          <el-form-item label="主页显示疫情地图">
            <el-switch v-model="delivery_two"></el-switch>
          </el-form-item>
          <el-button
            type="primary"
            @click="MapClick(delivery_one, delivery_two)"
            >保存并应用</el-button
          >
        </el-form>
      </el-card>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "TackView",
  data() {
    return {
      radio1: "正常",
      radio2: "小号",
      radio3: "超小号",
      delivery_one: "",
      delivery_two: "",
      labelPosition: "left",
    };
  },
  methods: {
    //点击保存主页是否显示地图
    MapClick(isone, istwo) {
      console.log([isone, istwo]);
      this.$store.commit("up/Mapclick", [isone, istwo]);
      //强制刷新
      window.location.reload();
    },
  },
  async mounted() {
    let res1 = await this.$store.state.up.menu;
    let res2 = await this.$store.state.up.map;
    console.log(res1, res2);
    this.delivery_one = res1;
    this.delivery_two = res2;
  },
};
</script>

<style lang="scss">
.tack {
  font-size: 14px;
  a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 14px;
  }
  .el-card__body {
    padding: 20px;
  }
  .el-card {
    border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    border-radius: 4px;
    overflow: hidden;
    transition: 0.3s;
  }
  .tack_btm {
    width: 100%;
    margin-top: 10px;
    .box-card {
      width: 90%;
      border: 1px solid #ebeef5;
      background-color: #fff;
      color: #303133;
      transition: 0.3s;
      .el-form-item__label {
        width: 125px;
      }
      .el-radio-button__inner {
        padding: 10px 20px;
        font-size: 14px;
      }
    }
    .text {
      font-size: 14px;
    }

    .item {
      padding: 18px 0;
    }
  }
}
</style>